<script setup>
import { ref } from 'vue'
import { getGoodListAPI } from '@/api/good'
import { ElMessage } from 'element-plus';

// 初始化数据
const tableData = ref([]) //订单列表数据
const goodListData = ref([]) //商品列表数据
const goodsData = ref([]) //商品数据
const type0Goods = ref([]) //0级商品数据
const type1Goods = ref([]) //1级商品数据
const type2Goods = ref([]) //2级商品数据
const totalMoney = ref(0) //总金额
const totalCount = ref(0) //总数量

// 获取商品列表
const getGoodList = async () => {
    const res = await getGoodListAPI()
    goodListData.value = res.rows;
    console.log(goodListData.value)
    // goodsData.value = goodListData.value.filter(item => item.storeId === 1)
    console.log(goodsData.value);
    type0Goods.value = goodListData.value;
    console.log(type0Goods.value);
    
    
    // type0Goods.value = goodsData.value.filter(item => item.type === 0)
    type1Goods.value = goodsData.value.filter(item => item.type === 1)
    type2Goods.value = goodsData.value.filter(item =>item.type === 2)
}
getGoodList();

const search_input = ref('')
// 搜索框搜索参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 5,
  goodName: ''
})

// 搜索在售商品
function searchGoods() {
    queryParams.value.goodName = search_input.value
    getGoodListAPI(queryParams.value).then(res => {
        goodListData.value = res.rows;
        console.log(goodListData.value)
        goodsData.value = goodListData.value.filter(item => item.storeId === 1)
        console.log(goodsData.value);
        type0Goods.value = goodsData.value;
    })
    .catch(err => {
        ElMessage.error(err);
    });
}


// 添加和计算商品价格
function addOrderList(goods) {
  // 商品是否已经存在于订单列表中
  const isExist = ref(false);
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === goods.id) {
      isExist.value = true;
    }
  }
  if (isExist.value) {
    // 如果商品已经存在于订单列表中，则更新数量和价格
    tableData.value.forEach(item => {
      if (item.id === goods.id) {
        item.count += 1;
      }
    });
  } else {
    tableData.value.push({
      id: goods.id,
      goodName: goods.goodName,
      price: goods.price,
      count: 1
    });
  }
  getAllMoney();
}

// 删除单个商品
function delGoods(goods) {
    tableData.value = tableData.value.filter(item => item.id !== goods.id);
    getAllMoney();
}
// 全部删除商品
function delAllGoods() {
    tableData.value = [];
    totalCount.value = 0;
    totalMoney.value = 0;
}

// 数量和价格的汇总计算
function getAllMoney() {
  totalCount.value = 0;
  totalMoney.value = 0;
  if (tableData.value) {
    tableData.value.forEach(item => {
      totalCount.value += item.count;
      totalMoney.value += item.price * item.count;
    });
  }
}

// 结账
function checkOut() {
    if (totalCount.value != 0) {
        tableData.value = [];
        totalCount.value = 0;
        totalMoney.value = 0;
        ElMessage.success("结账成功,辛苦啦~");
    } else {
        ElMessage.warning("没有东西，怎么结账呀~");
    }
}

</script>


<template>
    <div class="left_nav">
        <ul>
            <li>
                <i class="iconfont"></i>
                <router-link to="/cashier">收银</router-link>
            </li>
            <li>
                <i class="iconfont"></i>
                <RouterLink to="/cashier/order">订单</RouterLink>
            </li>
            <li>
                <i class="iconfont"></i>
                <RouterLink to="/cashier/inventory">库存</RouterLink>
            </li>
        </ul>
    </div>

    <div class="pos">
    <el-row>
      <el-col :span='8' class="pos_order" id="order_list">
        <el-tabs style="padding-left:10px;">
            <el-tab-pane label="桃禧-线下收银">
              <el-table :data="tableData" border style="width:100%;">
                <el-table-column prop="goodName" label="商品名称" width="100"> </el-table-column>
                <el-table-column prop="count" label="数量"> </el-table-column>
                <el-table-column prop="price" label="金额"> </el-table-column>
                <el-table-column label="操作" width="100" fixed='right'>
                  <template v-slot='scope'>
                      <el-button type="text" size="small" @click="addOrderList(scope.row)" style="padding-left: 5px;">增加</el-button>
                      <el-button type="text" size="small" @click="delGoods(scope.row)" style="padding-left: 35px;">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="total">
                <small>数量:</small>{{ totalCount }}<small>金额:</small>{{ totalMoney }}
              </div>
              <div class="pos_btn">
                <el-button type="danger" @click="delAllGoods()">删除</el-button>
                <el-button type="success" @click="checkOut()">结账</el-button>
              </div>
            </el-tab-pane>
        </el-tabs>
      </el-col>
        <el-col :span="16">
          <div class="often_goodsList">
            <div class="often_title">在线搜索商品</div>
            <div class="search_input">
              <el-input v-model="search_input" placeholder="请输入商品编号/名称" clearable></el-input>
              <el-button type="primary" @click="searchGoods()" style="margin-left: 20px;">搜索</el-button>
            </div>
          </div>
          <div class="goodsType">
            <el-tabs style="padding-left:10px;">
              <el-tab-pane label="上装" >

                <div>
                  <ul class='cookList'>
                    <li v-for="goods in type0Goods" :key="goods.id" @click="addOrderList(goods)">
                      <span class="foodImg"><img :src="goods.image?.url || 'https://ts1.cn.mm.bing.net/th/id/R-C.4ef7a53c54e4d15e09c5ba8d95d9b14e?rik=R68%2fjDugSx%2f%2f0Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50101%2f4440.jpg_wh1200.jpg&ehk=F5f2RE%2fKTfXuSUNexOEt3AYgHb7jGkqX9vfMdDAUnAI%3d&risl=&pid=ImgRaw&r=0'" width="100%"></span>
                      <span class="foodName">{{goods.goodName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                  </ul>
                </div>
              </el-tab-pane>

               <el-tab-pane label="下装">
                <ul class='cookList'>
                    <li v-for="goods in type1Goods" :key="goods.id" @click="addOrderList(goods)">
                      <span class="foodImg"><img :src="goods.image.url" width="100%"></span>
                      <span class="foodName">{{goods.goodName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                  </ul>
              </el-tab-pane>

               <el-tab-pane label="鞋袜">
                <ul class='cookList'>
                    <li v-for="goods in type2Goods" :key="goods.id" @click="addOrderList(goods)">
                      <span class="foodImg"><img :src="goods.image.url" width="100%"></span>
                      <span class="foodName">{{goods.goodName}}</span>
                      <span class="foodPrice">￥{{goods.price}}元</span>
                    </li>
                  </ul>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
    </el-row>
  </div>
</template>
  
  
<style>
    .left_nav {
        color: #ffffff;
        font-size: 20px;
        height: calc(100vh);
        background-color: #e58686;
        float: left;
        width: 5%;
    }
    .iconfont {
        font-size: 24px;
    }
    .left_nav ul {
        padding: 0px;
        margin: 0px;
    }
    .left_nav li {
        margin: 50px 0px 50px 0px;
        list-style: none;
        text-align: center;
        border-bottom: 1px solid #454545;
        padding: 10px;
    }

.pos_order {
  background-color: #f9fafc;
  border-right: 1px solid #c0ccda;
}
.pos_btn {
  margin-top: 20px;
}
.often_title {
  height: 40px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.search_input {
    display: flex;
    margin: 10px 50px;
    width: 500px;
}

.often_price {
  color: #e58686;
}
.goodsType {
  clear: both;
  height: auto;
  overflow: hidden;
  border-top: 1px solid #d3dce6;
}

.cookList li {
  list-style: none;
  width: 23%;
  border: 1px solid #e5e9f2;
  height: auot;
  overflow: hidden;
  background-color: #fff;
  padding: 2px;
  float: left;
  margin: 2px;
  cursor: pointer;
}
.cookList li span {
  display: block;
  float: left;
}
.foodImg {
  width: 40%;
}
.foodName {
  font-size: 16px;
  padding-left: 10px;
  color: brown;
}
.foodPrice {
  font-size: 16px;
  padding-left: 20px;
  padding-top: 60px;
}
.total {
  background: #ffffff;
  padding: 10px;
  border-bottom: 1px solid #d3dce6;
}
.total small {
  padding: 0 10px;
  text-align: center;
}
</style>
  